﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <!-- jsp文件头和头部 -->
    <%@ include file="../admin/top.jsp" %>

    <style>
        .li_style {
            list-style: none;
            margin: 0;
            padding: 0;
            padding-top: 20px;
            height: 50px;
            padding-left: 50px;
            float: left;
        }

        .ul_style {
            list-style: none;
            margin: 0;
            padding: 0;
            padding-top: 20px;
            height: 50px;
            padding-left: 50px;
        }
    </style>
</head>
<body>
<div class="container-fluid" id="main-container">
    <div id="page-content" class="clearfix">
        <div class="row-fluid">
            <div class="row-fluid">
                <!-- 检索  -->
                <form action="">
                    <input type="hidden" name="id" id="id" value="${advert.id}">
                    <input type="hidden" name="type" id="type" value="${type}">
                    <div style="width: 80%; padding-top: 50px; padding-left: 50px">
                        <ul class="ul_style">
                            <label class="li_style" style="margin-left: -50px;font-weight: bold">
                                <font color='red'>*</font>
                                开启状态:
                            </label>
                            <select class="form-control in-block" name="status" id="status"
                                    style="width: 20%;margin-left: 30px;margin-top: 15px;float: left;">
                                <option value="" selected>选择开启状态</option>
                                <option value="1" <c:if test="${advert.status == 1}">selected</c:if>>开启</option>
                                <option value="0" <c:if test="${advert.status == 0}">selected</c:if>>关闭</option>
                            </select>
                        </ul>
                        <ul class="ul_style">
                            <label class="li_style" style="margin-left: -50px;font-weight: bold">
                                <font color='red'>*</font>
                                媒体位ID:
                            </label>
                            <input type="number" name="number" id="number" value="${advert.number}">
                        </ul>
                        <ul class="ul_style">
                            <label class="li_style" style="margin-left: -50px;font-weight: bold">
                                <font color='red'>*</font>
                                标题:
                            </label>
                            <input type="text" name="title" id="title" value="${advert.title}" placeholder="标题">
                        </ul>
                        <ul class="ul_style">
                            <label class="li_style" style="margin-left: -50px;font-weight: bold">
                                <font color='red'>*</font>
                                跳转链接:
                            </label>
                            <input type="text" name="link" id="link" value="${advert.link}" placeholder="跳转链接">
                        </ul>
                        <ul class="ul_style" style="height: 100px">
                            <label class="li_style" style="margin-left: -50px;font-weight: bold">
                                <font color='red'>*</font>
                                弹窗图片:
                            </label>
                            <span>
								<input type="file" name="imgUrlFile" id="imgUrlFile" onchange="showImg(this, 1)">
								<img id="imgUrl" src="${advert.imgUrl}" style="height: 100px;width: 100px">
							</span>
                        </ul>
                        <ul class="ul_style">
                            <label class="li_style" style="margin-left: -50px;font-weight: bold">
                                <font color='red'>*</font>
                                跳转方式:
                            </label>
                            <select class="form-control in-block" name="skipType" id="skipType"
                                    style="width: 20%;margin-left: 30px;margin-top: 15px;float: left;">
                                <option value="">选择跳转方式</option>
                                <option value="1" <c:if test="${advert.skipType == 1}">selected</c:if>>内部跳转</option>
                                <option value="2" <c:if test="${advert.skipType == 2}">selected</c:if>>小程序</option>
                                <option value="3" <c:if test="${advert.skipType == 3}">selected</c:if>>公众号</option>
                                <option value="4" <c:if test="${advert.skipType == 4}">selected</c:if>>广告SDK</option>
                                <option value="5" <c:if test="${advert.skipType == 5}">selected</c:if>>deeplink</option>
                            </select>
                        </ul>
                        <div class="smallProgramControl"
                             <c:if test="${advert.skipType != 2}">style="display: none"</c:if>>
                            <ul class="ul_style">
                                <label class="li_style" style="margin-left: -50px;font-weight: bold">
                                    <font color='red'>*</font>
                                    小程序ID:
                                </label>
                                <input type="text" name="smallProgramId" id="smallProgramId"
                                       value="${advert.smallProgramId}" placeholder="小程序原始ID"/>
                            </ul>
                            <ul class="ul_style">
                                <label class="li_style" style="margin-left: -50px;font-weight: bold">
                                    小程序路径:
                                </label>
                                <input type="text" name="smallProgramPath" id="smallProgramPath"
                                       value="${advert.smallProgramPath}" placeholder="小程序跳转路径"/>
                            </ul>
                        </div>
                        <div class="gzhControl" <c:if test="${advert.skipType != 3}">style="display: none"</c:if>>
                            <ul class="ul_style" style="height: 100px">
                                <label class="li_style" style="margin-left: -50px;font-weight: bold">
                                    <font color='red'>*</font>
                                    二维码:
                                </label>
                                <span>
									<input type="file" name="includeQRcodeImageFile" id="includeQRcodeImageFile"
                                           onchange="showImg(this, 2)">
									<img id="includeQRcodeImage" src="${advert.includeQRcodeImage}"
                                         style="height: 100px;width: 100px">
								</span>
                            </ul>
                            <ul class="ul_style" style="height: 100px">
                                <label class="li_style" style="margin-left: -50px;font-weight: bold">
                                    <font color='red'>*</font>
                                    跳转按钮:
                                </label>
                                <span>
									<input type="file" name="bottomBtnImageFile" id="bottomBtnImageFile"
                                           onchange="showImg(this, 3)">
									<img id="bottomBtnImage" src="${advert.bottomBtnImage}"
                                         style="height: 100px;width: 100px">
								</span>
                            </ul>
                            <ul class="ul_style">
                                <label class="li_style" style="margin-left: -50px;font-weight: bold">
                                    <font color='red'>*</font>
                                    跳转提示语:
                                </label>
                                <input type="text" name="jumpTipsWords" id="jumpTipsWords"
                                       value="${advert.jumpTipsWords}" placeholder="跳转提示语"/>
                            </ul>
                        </div>
                        <div class="advertSDKControl" <c:if test="${advert.skipType != 4}">style="display: none"</c:if>>
                            <ul class="ul_style">
                                <label class="li_style" style="margin-left: -50px;font-weight: bold">
                                    <font color='red'>*</font>
                                    广告商:
                                </label>
                                <input type="text" name="advertFirm" id="advertFirm" value="${advert.advertFirm}"
                                       placeholder="广告商"/>
                            </ul>
                        </div>

                        <div style="font-size: 14px;color: red; white-space: pre-wrap">
                            <span id="msgHint"
                                  style="display: none;float: left;margin-right: 10px;width: 95%;white-space: normal"></span>
                        </div>
                        <br/>
                        <div style="margin-top: 30px;margin-left: 100px">
                            <input class="btn btn-primary" type="button" onclick="save()" value=确定 id="submitBut">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 返回顶部  -->
<a href="#" id="btn-scroll-up" class="btn btn-small btn-inverse">
    <i class="icon-double-angle-up icon-only"></i>
</a>
<!-- 引入 -->
<script type="text/javascript">window.jQuery || document.write("<script src='static/js/jquery-1.9.1.min.js'>\x3C/script>");</script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/ace-elements.min.js"></script>
<script src="static/js/ace.min.js"></script>

<script type="text/javascript" src="static/js/chosen.jquery.min.js"></script><!-- 下拉框 -->
<script type="text/javascript" src="static/js/bootbox.min.js"></script><!-- 确认窗口 -->
<!-- 引入 -->
<script type="text/javascript" src="static/js/jquery.tips.js"></script><!--提示框-->
<script type="text/javascript">
    $(top.hangge());
</script>

</body>
</html>

<script type="text/javascript">
    $(function () {
        //下拉框
        $(".chzn-select").chosen();
        $(".chzn-select-deselect").chosen({allow_single_deselect: true});

        $("#skipType").change(function () {
            var type = $(this).val();
            if (type == 2) {
                $(".smallProgramControl").css("display", "block");
                $(".gzhControl").css("display", "none");
                $(".advertSDKControl").css("display", "none");
            } else if (type == 3) {
                $(".smallProgramControl").css("display", "none");
                $(".gzhControl").css("display", "block");
                $(".advertSDKControl").css("display", "none");
            } else if (type == 4) {
                $(".smallProgramControl").css("display", "none");
                $(".gzhControl").css("display", "none");
                $(".advertSDKControl").css("display", "block");
            } else {
                $(".smallProgramControl").css("display", "none");
                $(".gzhControl").css("display", "none");
                $(".advertSDKControl").css("display", "none");
            }
        });

    });

    //展示图片
    function showImg(obj, type) {
        if ($(obj).context.files) {
            if (type == 1) {
                document.getElementById("imgUrl").src = window.URL.createObjectURL($(obj).context.files[0]);
            } else if (type == 2) {
                document.getElementById("includeQRcodeImage").src = window.URL.createObjectURL($(obj).context.files[0]);
            } else if (type == 3) {
                document.getElementById("bottomBtnImage").src = window.URL.createObjectURL($(obj).context.files[0]);
            }
        }
    }

    //保存
    function save() {
        var formData = new FormData();
        formData.append("id", $("#id").val());
        formData.append("type", $("#type").val());
        var status = $("#status").val();
        if (status == "") {
            $("#status").tips({
                side: 3,
                msg: '请选择状态',
                bg: '#AE81FF',
                time: 2
            });
            $("#status").focus();
            return false;
        }
        formData.append("status", status);
        var number = $("#number").val();
        if (number == "") {
            $("#number").tips({
                side: 3,
                msg: '请输入媒体位ID',
                bg: '#AE81FF',
                time: 2
            });
            $("#number").focus();
            return false;
        }
        formData.append("number", number);
        var title = $("#title").val();
        if (title == "") {
            $("#title").tips({
                side: 3,
                msg: '请输入标题',
                bg: '#AE81FF',
                time: 2
            });
            $("#title").focus();
            return false;
        }
        formData.append("title", title);
        var link = $("#link").val();
        if (link == "") {
            $("#link").tips({
                side: 3,
                msg: '请输入跳转链接',
                bg: '#AE81FF',
                time: 2
            });
            $("#link").focus();
            return false;
        }
        formData.append("link", link);
        var imgUrlFile = $("#imgUrlFile").get(0).files[0];
        if (!imgUrlFile) {
            var url = $("#imgUrl").attr("src");
            if (!url) {
                $("#imgUrlFile").tips({
                    side: 3,
                    msg: '请选择图片上传',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#imgUrlFile").focus();
                return false;
            }
        } else {
            formData.append("imgUrlFile", imgUrlFile);
        }
        var skipType = $("#skipType").val();
        if (skipType == "") {
            $("#skipType").tips({
                side: 3,
                msg: '请选择跳转方式',
                bg: '#AE81FF',
                time: 2
            });
            $("#skipType").focus();
            return false;
        }
        formData.append("skipType", skipType);
        if (skipType == 2) {
            var smallProgramId = $("#smallProgramId").val();
            if (smallProgramId == "") {
                $("#smallProgramId").tips({
                    side: 3,
                    msg: '请输入小程序ID',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#smallProgramId").focus();
                return false;
            }
            formData.append("smallProgramId", smallProgramId);
            var smallProgramPath = $("#smallProgramPath").val();
            formData.append("smallProgramPath", smallProgramPath);
        } else if (skipType == 3) {
            var includeQRcodeImageFile = $("#includeQRcodeImageFile").get(0).files[0];
            if (!includeQRcodeImageFile) {
                var url = $("#includeQRcodeImage").attr("src");
                if (!url) {
                    $("#includeQRcodeImageFile").tips({
                        side: 3,
                        msg: '请选择二维码上传',
                        bg: '#AE81FF',
                        time: 2
                    });
                    $("#includeQRcodeImageFile").focus();
                    return false;
                }
            } else {
                formData.append("includeQRcodeImageFile", includeQRcodeImageFile);
            }
            var bottomBtnImageFile = $("#bottomBtnImageFile").get(0).files[0];
            if (!bottomBtnImageFile) {
                var url = $("#bottomBtnImage").attr("src");
                if (!url) {
                    $("#bottomBtnImageFile").tips({
                        side: 3,
                        msg: '请选择跳转按钮上传',
                        bg: '#AE81FF',
                        time: 2
                    });
                    $("#bottomBtnImageFile").focus();
                    return false;
                }
            } else {
                formData.append("bottomBtnImageFile", bottomBtnImageFile);
            }
            var jumpTipsWords = $("#jumpTipsWords").val();
            if (jumpTipsWords == "") {
                $("#jumpTipsWords").tips({
                    side: 3,
                    msg: '请输入跳转提示语',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#jumpTipsWords").focus();
                return false;
            }
            formData.append("jumpTipsWords", jumpTipsWords);
        } else if (skipType == 4) {
            var advertFirm = $("#advertFirm").val();
            if (advertFirm == "") {
                $("#advertFirm").tips({
                    side: 3,
                    msg: '请输入广告商',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#advertFirm").focus();
                return false;
            }
            formData.append("advertFirm", advertFirm);
        }
        $("#submitBut").attr("disabled", true);
        //
        $.ajax({
            type: "post",
            url: "/advert/addOrEdit",
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                $("#submitBut").attr("disabled", false);
                if (data.code == 200) {
                    $("#msgHint").css("display", "block");
                    $("#msgHint").css("white-space", "pre-wrap");
                    $("#submitBut").attr("disabled", false);
                    $("#msgHint").text(data.msg);
                    if (data.data) {
                        $("#id").val(data.data);
                    }
                }
            }
        })
    }
</script>
